<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <th:block th:include="include :: header('用户个人信息')" />
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
    <input  type="hidden" id="orderDateJson" th:value="${orderDateJson}"/>
    <input  type="hidden" id="orderDateMonthJson" th:value="${orderDateMonthJson}"/>
    
		<input  type="hidden" id="orderCountJson" th:value="${orderCountJson}"/>
		<input  type="hidden" id="orderCountForTUIKUANJson" th:value="${orderCountForTUIKUANJson}"/>
		<input  type="hidden" id="orderCountMonthJson" th:value="${orderCountMonthJson}"/>
		<input  type="hidden" id="orderCountForTUIKUANMonthJson" th:value="${orderCountForTUIKUANMonthJson}"/>
		
		<input  type="hidden" id="userAddCountJson" th:value="${userAddCountJson}"/>
		<input  type="hidden" id="riderUserAddCountJson" th:value="${riderUserAddCountJson}"/>
		<input  type="hidden" id="userAddCountMonthJson" th:value="${userAddCountMonthJson}"/>
		<input  type="hidden" id="riderUserAddCountMonthJson" th:value="${riderUserAddCountMonthJson}"/>
		
		

        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                    	<span class="label label-info pull-right btn" id="moneyYear" onclick="moneyChange3()">年</span>
                        <span class="label label-success pull-right btn" id="moneyMonth" onclick="moneyChange2()">月</span>
                        <span class="label label-primary pull-right btn" id="moneyDay" onclick="moneyChange1()">日</span>
                        <h5>收入</h5>
                    </div>
                    <div class="ibox-content" id="moneyDayWindow">
                        <h1 class="no-margins">￥[[${moneyDay}]]</h1>                        
                        <small>总收入</small>
                    </div>
                    <div class="ibox-content" style="display: none" id="moneyMonthWindow">
                        <h1 class="no-margins">￥[[${moneyMonth}]]</h1>                        
                        <small>总收入</small>
                    </div>
                    <div class="ibox-content" style="display: none" id="moneyYearWindow">
                        <h1 class="no-margins">￥[[${moneyYear}]]</h1>                        
                        <small>总收入</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                    	<span class="label label-info pull-right btn" id="orderYear" onclick="orderChange3()">年</span>
                    	<span class="label label-success pull-right btn" id="orderMonth" onclick="orderChange2()">月</span>
                        <span class="label label-primary pull-right btn" id="orderDay" onclick="orderChange1()">日</span>
                        <h5>订单</h5>
                    </div>
                    <div class="ibox-content" id="orderDayWindow">
                        <h1 class="no-margins">[[${orderDay}]]</h1>                        
                        <small>新订单</small>
                    </div>
                    
                    <div class="ibox-content" id="orderMonthWindow" style="display: none">
                        <h1 class="no-margins">[[${orderMonth}]]</h1>                        
                        <small>新订单</small>
                    </div>
                    
                    <div class="ibox-content" id="orderYearWindow" style="display: none">
                        <h1 class="no-margins">[[${orderYear}]]</h1>                        
                        <small>新订单</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">今天</span>
                        <h5>余额</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">[[${accountMoney}]]</h1>   
                        <div class="stat-percent font-bold"><span class="label label-danger pull-right btn" onclick="getRealMoney()">提现</span> 
                        </div>
                        <small>元</small>                                          
                    </div>
               
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins" id="gotMoney">
                    <div class="ibox-title">                      
                        <h5>已提现金额</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">[[${accountMoneyGot}]]</h1>
                        
                        <small>元</small>
                    </div>
                </div>
                
                <div class="ibox float-e-margins" id="userVerify">
                    <div class="ibox-title">                      
                        <h5>待审核骑手</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" style="color: red">[[${riderVerifyCount}]]</h1>
                        <a th:href="@{/User/userVerify}" class="label label-primary pull-right btn">审核骑手</a>
                        <small>位</small>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>订单</h5>
                        <div class="pull-right">
                            <div class="btn-group">								
								<button id="test1" type="button" class="btn btn-xs btn-white active" onclick="exchangebtn1()">天</button>
                                <button id="test2" type="button" class="btn btn-xs btn-white" onclick="exchangebtn2()">月</button>
                               <!--  <button id="test3" type="button" class="btn btn-xs btn-white" onclick="exchangebtn3()">年</button> -->
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-9" style="display: none;">
                                <div class="flot-chart">
                                    <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                                </div>
                            </div>
                            
                            <div class="col-sm-9">
                                <div class="flot-chart tab-content" id="myTabContent">
                                    <div class="echarts" id="echarts-line-chart" ></div>
                                    <div class="echarts" id="echarts-line-chart2"></div>
                                    <!-- <div class="echarts" id="echarts-line-chart3"></div> -->
                                </div>
                                
                                
                            </div>
                            <div class="col-sm-3">
                                <ul class="stat-list">
                                <li>
                                        <h2 class="no-margins " style="color: red; ">[[${verifyOrderCount}]]</h2>
                                        <small>待维权订单</small>                                        
                                        <a th:href="@{/Order/verifyOrder}" class="label label-primary pull-right btn">审核订单</a>
                                        <div class="progress progress-mini">
                                            <div style="width: 22%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <h2 class="no-margins">[[${orderCountAll}]]</h2>
                                        <small>订单总数</small>
                                        
                                        <div class="progress progress-mini">
                                            <div style="width: 48%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <h2 class="no-margins ">[[${orderMonth}]]</h2>
                                        <small>本月订单</small>
                                        
                                        <div class="progress progress-mini">
                                            <div style="width: 60%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <h2 class="no-margins ">[[${moneyYear}]]</h2>
                                        <small>本年度总销售额</small>
                                       
                                        <div class="progress progress-mini">
                                            <div style="width: 22%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                    
                                 </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        
        
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>平台用户</h5>
                        <div class="pull-right">
                            <div class="btn-group">								
								<button id="test4" type="button" class="btn btn-xs btn-white active" onclick="exchangebtn4()">天</button>
                                <button id="test5" type="button" class="btn btn-xs btn-white" onclick="exchangebtn5()">月</button>
                                <!-- <button id="test6" type="button" class="btn btn-xs btn-white" onclick="exchangebtn6()">年</button> -->
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                           
                            
                            <div class="col-sm-12">
                                <div class="flot-chart tab-content" id="myTabContent">
                                    <div class="echarts" id="echarts-line-chart4" ></div>
                                    <div class="echarts" id="echarts-line-chart5"></div>
                                    <!-- <div class="echarts" id="echarts-line-chart6"></div> -->
                                </div>
                                
                                
                            </div>
                            <!-- <div class="col-sm-3">
                                <ul class="stat-list">
                                    <li>
                                        <h2 class="no-margins">[[${orderCountAll}]]</h2>
                                        <small>订单总数</small>
                                        
                                        <div class="progress progress-mini">
                                            <div style="width: 48%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <h2 class="no-margins ">[[${orderMonth}]]</h2>
                                        <small>本月订单</small>
                                        
                                        <div class="progress progress-mini">
                                            <div style="width: 60%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <h2 class="no-margins ">[[${moneyYear}]]</h2>
                                        <small>本年度总销售额</small>
                                        
                                        <div class="progress progress-mini">
                                            <div style="width: 22%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <h2 class="no-margins ">[[${moneyMonth}]]</h2>
                                        <small>本月销售额</small>
                                      
                                        <div class="progress progress-mini">
                                            <div style="width: 22%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                 </ul>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
      
      </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
    
    <th:block th:include="include :: sparkline-js" />
    <th:block th:include="include :: echarts-js" />
    <th:block th:include="include :: footer" />
    <script type="text/javascript">
    
    window.onload=function(){
    	$('#test1').click();
    	$('#test4').click();
    	
    }
	    $(document).ready(function () {	    	
	    });
	    
	    
					function moneyChange1() {
						$('#moneyDayWindow').css("display", "block");
			    		$('#moneyMonthWindow').css("display", "none");
			    		$('#moneyYearWindow').css("display", "none");
					}

					function moneyChange2() {
						$('#moneyDayWindow').css("display", "none");
						$('#moneyMonthWindow').css("display", "block");
						$('#moneyYearWindow').css("display", "none");
					}
					function moneyChange3() {
						$('#moneyDayWindow').css("display", "none");
						$('#moneyMonthWindow').css("display", "none");
						$('#moneyYearWindow').css("display", "block");
					}
					
					function orderChange1() {
						$('#orderDayWindow').css("display", "block");
			    		$('#orderMonthWindow').css("display", "none");
			    		$('#orderYearWindow').css("display", "none");
					}

					function orderChange2() {
						$('#orderDayWindow').css("display", "none");
						$('#orderMonthWindow').css("display", "block");
						$('#orderYearWindow').css("display", "none");
					}
					function orderChange3() {
						$('#orderDayWindow').css("display", "none");
						$('#orderMonthWindow').css("display", "none");
						$('#orderYearWindow').css("display", "block");
					}
					
					function getRealMoney() {
			        	$.modal.open('提交提现申请', ctx + 'StoreRealMoney/storeRealmoneyVerify/add', '600', '700');			
					}

					function exchangebtn1() {
						$('#test2').removeClass("active");
						/* $('#test3').removeClass("active"); */
						$('#echarts-line-chart').css('display', 'block');
						/* $('#echarts-line-chart3').css('display','none'); */
						$('#echarts-line-chart2').css('display', 'none');
						$('#test1').addClass('active');
						return true; //加这行！		
					}
					function exchangebtn2() {
						$('#test1').removeClass("active");
						/* $('#test3').removeClass("active"); */
						$('#echarts-line-chart2').css('display', 'block');
						/* $('#echarts-line-chart3').css('display','none'); */
						$('#echarts-line-chart').css('display', 'none');

						/* css('display','none');
						$('#monthOrder').css('display','block'); */

						$('#test2').addClass('active');

					}
					/* function exchangebtn3() {
						$('#test2').removeClass("active");
						$('#test1').removeClass("active");
						$('#echarts-line-chart3').css('display','block');
						$('#echarts-line-chart').css('display','none');	    	
						$('#echarts-line-chart2').css('display','none');
						$('#test3').addClass('active');
						return true;  //加这行！		
					} */

					function exchangebtn4() {
						$('#test5').removeClass("active");
						/* $('#test6').removeClass("active"); */
						$('#echarts-line-chart4').css('display', 'block');
						$('#echarts-line-chart5').css('display', 'none');
						/* $('#echarts-line-chart6').css('display','none'); */
						$('#test4').addClass('active');
						return true; //加这行！		
					}

					function exchangebtn5() {
						$('#test4').removeClass("active");
						/* $('#test6').removeClass("active"); */
						$('#echarts-line-chart5').css('display', 'block');
						$('#echarts-line-chart4').css('display', 'none');
						/* $('#echarts-line-chart6').css('display','none'); */
						$('#test5').addClass('active');
						return true; //加这行！		
					}

					/* function exchangebtn6() {
						$('#test4').removeClass("active");
						$('#test5').removeClass("active");
						$('#echarts-line-chart6').css('display','block');
						$('#echarts-line-chart5').css('display','none');	    	
						$('#echarts-line-chart4').css('display','none');
						$('#test6').addClass('active');
						return true;  //加这行！		
					} */
					var orderDate = document.getElementById("orderDateJson").value;
					var orderDateArray = eval("(" + orderDate + ")");

					var orderDateMonth = document
							.getElementById("orderDateMonthJson").value;
					var orderDateMonthArray = eval("(" + orderDateMonth + ")");

					var orderCount = document.getElementById("orderCountJson").value;
					var orderCountArray = eval("(" + orderCount + ")");

					var orderCountForTUIKUAN = document
							.getElementById("orderCountForTUIKUANJson").value;
					var orderCountForTUIKUANArray = eval("("
							+ orderCountForTUIKUAN + ")");

					var orderCountForTUIKUANMonth = document
							.getElementById("orderCountForTUIKUANMonthJson").value;
					var orderCountForTUIKUANMonthArray = eval("("
							+ orderCountForTUIKUANMonth + ")");

					var orderCountMonth = document
							.getElementById("orderCountMonthJson").value;
					var orderCountMonthArray = eval("(" + orderCountMonth + ")");

					var userAddCount = document
							.getElementById("userAddCountJson").value;
					var userAddCountArray = eval("(" + userAddCount + ")");

					var riderUserAddCount = document
							.getElementById("riderUserAddCountJson").value;
					var riderUserAddCountArray = eval("(" + riderUserAddCount
							+ ")");

					var userAddCountMonth = document
							.getElementById("userAddCountMonthJson").value;
					var userAddCountMonthArray = eval("(" + userAddCountMonth
							+ ")");

					var riderUserAddCountMonth = document
							.getElementById("riderUserAddCountMonthJson").value;
					var riderUserAddCountMonthArray = eval("("
							+ riderUserAddCountMonth + ")");

					$(function() {
						var lineChart = echarts.init(document
								.getElementById("echarts-line-chart"));
						var lineoption = {
							title : {
								text : '日订单量'
							},
							tooltip : {
								trigger : 'axis'
							},
							legend : {
								data : [ '总订单数', '维权订单数' ]
							},
							grid : {
								x : 42,
								x2 : 40,
								y2 : 24
							},
							calculable : true,
							xAxis : [ {
								type : 'category',
								boundaryGap : false,
								data : orderDateArray
							} ],
							yAxis : [ {
								type : 'value',
								axisLabel : {
									formatter : '{value} 起'
								}
							} ],
							series : [ {
								name : '总订单数',
								type : 'line',
								data : orderCountArray,
								markPoint : {
									data : [ {
										type : 'max',
										name : '最大值'
									}, {
										type : 'min',
										name : '最小值'
									} ]
								},
								markLine : {
									data : [ {
										type : 'average',
										name : '平均值'
									} ]
								}
							}, {
								name : '维权订单数',
								type : 'line',
								data : orderCountForTUIKUANArray,
								markPoint : {
									data : [ {
										type : 'max',
										name : '最大值'
									}, {
										type : 'min',
										name : '最小值'
									} ]
								},
								markLine : {
									data : [ {
										type : 'average',
										name : '平均值'
									} ]
								}
							} ]
						};
						lineChart.setOption(lineoption);
						$(window).resize(lineChart.resize);

						var lineChart2 = echarts.init(document
								.getElementById("echarts-line-chart2"));
						var lineoption2 = {
							title : {
								text : '月订单量'
							},
							tooltip : {
								trigger : 'axis'
							},
							legend : {
								data : [ '总订单数', '维权订单数' ]
							},
							grid : {
								x : 42,
								x2 : 40,
								y2 : 24
							},
							calculable : true,
							xAxis : [ {
								type : 'category',
								boundaryGap : false,
								data : orderDateMonthArray
							} ],
							yAxis : [ {
								type : 'value',
								axisLabel : {
									formatter : '{value} 起'
								}
							} ],
							series : [ {
								name : '总订单数',
								type : 'line',
								data : orderCountMonthArray,
								markPoint : {
									data : [ {
										type : 'max',
										name : '最大值'
									}, {
										type : 'min',
										name : '最小值'
									} ]
								},
								markLine : {
									data : [ {
										type : 'average',
										name : '平均值'
									} ]
								}
							}, {
								name : '维权订单数',
								type : 'line',
								data : orderCountForTUIKUANMonthArray,
								markPoint : {
									data : [ {
										type : 'max',
										name : '最大值'
									}, {
										type : 'min',
										name : '最小值'
									} ]
								},
								markLine : {
									data : [ {
										type : 'average',
										name : '平均值'
									} ]
								}
							} ]
						};
						lineChart2.setOption(lineoption2);
						$(window).resize(lineChart2.resize);

						var lineChart3 = echarts.init(document
								.getElementById("echarts-line-chart3"));
						var lineoption3 = {
							title : {
								text : '年订单'
							},
							tooltip : {
								trigger : 'axis'
							},
							legend : {
								data : [ '总订单数', '维权订单数' ]
							},
							grid : {
								x : 40,
								x2 : 40,
								y2 : 24
							},
							calculable : true,
							xAxis : [ {
								type : 'category',
								boundaryGap : false,
								data : orderDateArray
							} ],
							yAxis : [ {
								type : 'value',
								axisLabel : {
									formatter : '{value} 起'
								}
							} ],
							series : [ {
								name : '总订单数',
								type : 'line',
								data : orderCountArray,
								markPoint : {
									data : [ {
										type : 'max',
										name : '最大值'
									}, {
										type : 'min',
										name : '最小值'
									} ]
								},
								markLine : {
									data : [ {
										type : 'average',
										name : '平均值'
									} ]
								}
							}, {
								name : '维权订单数',
								type : 'line',
								data : orderCountForTUIKUANArray,
								markPoint : {
									data : [ {
										type : 'max',
										name : '最大值'
									}, {
										type : 'min',
										name : '最小值'
									} ]
								},
								markLine : {
									data : [ {
										type : 'average',
										name : '平均值'
									} ]
								}
							} ]
						};
						lineChart3.setOption(lineoption3);
						$(window).resize(lineChart3.resize);
					});

					var lineChart4 = echarts.init(document
							.getElementById("echarts-line-chart4"));
					var lineoption4 = {
						title : {
							text : '日增加用户量'
						},
						tooltip : {
							trigger : 'axis'
						},
						legend : {
							data : [ '总用户增加量', '骑手增加量' ]
						},
						grid : {
							x : 30,
							x2 : 40,
							y2 : 24
						},
						calculable : true,
						xAxis : [ {
							type : 'category',
							data : orderDateArray
						} ],
						yAxis : [ {
							type : 'value'

						} ],
						series : [ {
							name : '总用户增加量',
							type : 'bar',
							data : userAddCountArray,
							markPoint : {
								data : [ {
									type : 'max',
									name : '最大值'
								}, {
									type : 'min',
									name : '最小值'
								} ]
							},
							markLine : {
								data : [ {
									type : 'average',
									name : '平均值'
								} ]
							}
						}, {
							name : '骑手增加量',
							type : 'bar',
							data : riderUserAddCountArray,
							markPoint : {
								data : [ {
									type : 'max',
									name : '最大值'
								}, {
									type : 'min',
									name : '最小值'
								} ]
							},
							markLine : {
								data : [ {
									type : 'average',
									name : '平均值'
								} ]
							}
						} ]
					};
					lineChart4.setOption(lineoption4);
					$(window).resize(lineChart4.resize);

					var lineChart5 = echarts.init(document
							.getElementById("echarts-line-chart5"));
					var lineoption5 = {
						title : {
							text : '月增加用户量'
						},
						tooltip : {
							trigger : 'axis'
						},
						legend : {
							data : [ '总用户增加量', '骑手增加量' ]
						},
						grid : {
							x : 42,
							x2 : 40,
							y2 : 24
						},
						calculable : true,
						xAxis : [ {
							type : 'category',
							data : orderDateMonthArray
						} ],
						yAxis : [ {
							type : 'value'
						}

						],
						series : [ {
							name : '总用户增加量',
							type : 'bar',
							data : userAddCountMonthArray,
							markPoint : {
								data : [ {
									type : 'max',
									name : '最大值'
								}, {
									type : 'min',
									name : '最小值'
								} ]
							},
							markLine : {
								data : [ {
									type : 'average',
									name : '平均值'
								} ]
							}
						}, {
							name : '骑手增加量',
							type : 'bar',
							data : riderUserAddCountMonthArray,
							markPoint : {
								data : [ {
									type : 'max',
									name : '最大值'
								}, {
									type : 'min',
									name : '最小值'
								} ]
							},
							markLine : {
								data : [ {
									type : 'average',
									name : '平均值'
								} ]
							}
						} ]
					};
					lineChart5.setOption(lineoption5);
					$(window).resize(lineChart5.resize);

					/* var lineChart6 = echarts.init(document.getElementById("echarts-line-chart6"));
					var lineoption6 = {
					    title : {
					        text: '月增加用户'
					    },
					    tooltip : {
					        trigger: 'axis'
					    },
					    legend: {
					        data:['总用户增加量','骑手增加量']
					    },
					    grid:{
					        x:30,
					        x2:40,
					        y2:24
					    },
					    calculable : true,
					    xAxis : [
					        {
					            type : 'category',
					            data : orderDateMonthArray
					        }
					    ],
					    yAxis : [
					        {
					            type : 'value'
					            }
					        
					    ],
					    series : [
					        {
					            name:'总用户增加量',
					        type:'bar',
					        data:userAddCountMonthArray,
					            markPoint : {
					                data : [
					                    {type : 'max', name: '最大值'},
					                    {type : 'min', name: '最小值'}
					                ]
					            },
					            markLine : {
					                data : [
					                    {type : 'average', name: '平均值'}
					                ]
					            }
					        },
					        {
					            name:'骑手增加量',
					        type:'bar',
					        data:riderUserAddCountMonthArray,
					            markPoint : {
					                data : [
					                    {type : 'max', name: '最大值'},
					                    {type : 'min', name: '最小值'}
					                ]
					            },
					            markLine : {
					                data : [
					                    {type : 'average', name : '平均值'}
					                ]
					            }
					        }
					    ]
					};
					lineChart6.setOption(lineoption6);
					$(window).resize(lineChart6.resize); */
					
					var userName='[[${user.userName}]]';
					if(userName=='系统管理员'){
						 document.getElementById('gotMoney').style.display = "none";
					} else {
						document.getElementById('userVerify').style.display = "none";
					}
				</script>
</body>
</html>
